<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>轮播1</title>
		<style type="text/css">
			.lb {
				width: 640px;
				height: 270px;
				margin: 10px auto;
			}
			
			#left-arrow {
				Position: relative;
				display: inline-block;
				top: -180px;
				z-index: 999;
				cursor: pointer;
			}
			
			#right-arrow {
				Position: relative;
				display: inline-block;
				top: -180px;
				right: -540px;
				z-index: 999;
				cursor: pointer;
			}
			
			#num-btn span {
				display: inline-block;
				font-size: 20px;
				width: 23.2px;
				font-family: arial;
				text-align: center;
				border: 1px solid#fff;
				border-radius: 50%;
				color: #fff;
				cursor: pointer;
				margin-left: 5px;
			}
			
			#num-btn {
				position: relative;
				top: -100px;
				left: 60%;
			}
		</style>
	</head>

	<body>
		<div class="lb">
			<img src="img/1.jpg" id="img" />
			<img src="img/btn_l.png" id="left-arrow" />
			<img src="img/btn_r.png" id="right-arrow" />
			<div id="num-btn">
				<span style="background: #f00;">1</span>
				<span>2</span>
				<span>3</span>
				<span>4</span>
				<span>5</span>
				<span>6</span>
			</div>
		</div>
		<!--
            	作者：offline
            	时间：2017-08-02
            	描述：<input type="button" value="下一张" id="btn" />;
            -->
		<script type="text/javascript">
			var left = document.getElementById("left-arrow");
			var right = document.getElementById("right-arrow");
			var img = document.getElementById("img");
			var index = 1;
			var btns = getChildren("num-btn", "span");

			function getChildren(id, tagname) {
				var arr = document.getElementById(id).childNodes;
				var ele = [];
				for (var i = 0; i < arr.length; i++) {
					if (arr[i].tagName == tagname.toUpperCase()) {
						ele.push(arr[i]);
					}
				}
				return ele;
			}
			for (var i = 0; i < btns.length; i++) {
				btns[i].onclick = (function() {
					var j = i + 1;
					return function() {
						index = j;
						img.src = "img/" + index + ".jpg";
						changbg();
					}
				})();
			}

			function changbg() {
				for (var i = 0; i < btns.length; i++) {
					btns[i].style.background = "#000";
				}
				btns[index - 1].style.background = "#f00";
			} /*红色标识要跟着动*/
			var moveLeft = function() {
				index++;
				if (index > 6) index = 1;
				img.src = "img/" + index + ".jpg";
				changbg();
			} /*切换上一张*/
			right.onclick = moveLeft;
			left.onclick = function() {
				index--;
				if (index < 1) index = 6;
				img.src = "img/" + index + ".jpg";
				changbg();
			} /*切换下一张*/
			var timer = setInterval(moveLeft, 2000); /*设置自动换图时间*/
			var lb = document.getElementsByClassName("lb")[0];
			lb.onmouseover = function() {
				clearInterval(timer);
			};
			lb.onmouseout = function() {
				timer = setInterval(moveLeft, 2000);
			}
		</script>
	</body>

</html>